<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溯源单一区块数据显示工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!--<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        neutral: '#3D4451',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .json-key {
                @apply text-primary font-medium;
            }
            .json-string {
                @apply text-green-600;
            }
            .json-number {
                @apply text-blue-600;
            }
            .json-boolean {
                @apply text-purple-600;
            }
            .json-null {
                @apply text-gray-500;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-neutral min-h-screen flex flex-col">
    <main class="flex-grow container mx-auto px-4 py-8 max-w-4xl">
        <section class="bg-white rounded-xl shadow-md p-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold flex items-center">
                    <i class="fa fa-json text-primary mr-2"></i>溯源单一区块数据显示工具
                </h2>
                <div class="flex space-x-2">
                    <button id="expand-all" class="text-sm px-3 py-1 bg-primary/10 text-primary rounded hover:bg-primary/20 transition-colors duration-200">
                        <i class="fa fa-plus-square-o mr-1"></i>全部展开
                    </button>
                    <button id="collapse-all" class="text-sm px-3 py-1 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors duration-200">
                        <i class="fa fa-minus-square-o mr-1"></i>全部折叠
                    </button>
                </div>
            </div>
            <div id="json-display" class="bg-gray-50 p-4 rounded-lg overflow-x-auto min-h-[200px]">
                <div class="flex items-center justify-center h-full text-gray-400">
                    <i class="fa fa-spinner fa-spin mr-2"></i>加载中...
                </div>
            </div>
        </section>
    </main>

    <script>
        // 预设的JSON数据
        const sampleJson = arr!@#$%^&*arr;  // arr!@#$%^&*arr 是c++读取html文件替换标识词，

        // 格式化JSON为可折叠的HTML
        function jsonToHtml(jsonObj, indentLevel = 0) {
            if (jsonObj === null) return '<span class="json-null">null</span>';
            if (typeof jsonObj === 'undefined') return '<span class="json-null">undefined</span>';
            if (typeof jsonObj !== 'object') {
                if (typeof jsonObj === 'string') {
                    return `<span class="json-string">"${escapeHtml(jsonObj)}"</span>`;
                }
                if (typeof jsonObj === 'number' || typeof jsonObj === 'boolean') {
                    return `<span class="${typeof jsonObj === 'number' ? 'json-number' : 'json-boolean'}">${jsonObj}</span>`;
                }
                return escapeHtml(jsonObj.toString());
            }

            const isArray = Array.isArray(jsonObj);
            const openBrace = isArray ? '[' : '{';
            const closeBrace = isArray ? ']' : '}';
            const items = [];
            const keys = Object.keys(jsonObj);

            if (keys.length === 0) {
                return `${openBrace}${closeBrace}`;
            }

            keys.forEach((key, index) => {
                const value = jsonObj[key];
                const keyDisplay = isArray ? '' : `<span class="json-key">"${escapeHtml(key)}"</span>: `;
                const valueDisplay = jsonToHtml(value, indentLevel + 1);
                const isLast = index === keys.length - 1;
                
                items.push(`
                    <div class="json-item pl-6 my-1">
                        <div class="flex items-start">
                            <span class="json-key-colon">${keyDisplay}</span>
                            <span class="json-value">${valueDisplay}</span>
                            <span class="json-comma">${isLast ? '' : ','}</span>
                        </div>
                    </div>
                `);
            });

            const toggleId = `json-toggle-${Math.random().toString(36).substr(2, 9)}`;
            const contentId = `json-content-${Math.random().toString(36).substr(2, 9)}`;
            const indent = '  '.repeat(indentLevel);
            
            return `
                <div class="json-container">
                    <div class="flex items-center cursor-pointer json-toggle" data-target="${contentId}">
                        <i class="fa fa-minus-square-o text-gray-500 mr-1 json-icon"></i>
                        <span>${openBrace}</span>
                    </div>
                    <div id="${contentId}" class="json-content pl-4">
                        ${items.join('')}
                    </div>
                    <div class="flex items-center cursor-pointer json-toggle" data-target="${contentId}">
                        <span>${closeBrace}</span>
                    </div>
                </div>
            `;
        }

        // 转义HTML特殊字符
        function escapeHtml(text) {
            return text
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        // 显示JSON数据
        function displayJson() {
            const jsonDisplay = document.getElementById('json-display');
            
            // 格式化JSON并显示
            const formattedJson = jsonToHtml(sampleJson);
            jsonDisplay.innerHTML = formattedJson;
            
            // 添加折叠/展开功能
            document.querySelectorAll('.json-toggle').forEach(toggle => {
                toggle.addEventListener('click', function() {
                    const targetId = this.getAttribute('data-target');
                    const content = document.getElementById(targetId);
                    const icon = this.querySelector('.json-icon');
                    
                    if (content.style.display === 'none') {
                        content.style.display = 'block';
                        if (icon) icon.className = 'fa fa-minus-square-o text-gray-500 mr-1 json-icon';
                    } else {
                        content.style.display = 'none';
                        if (icon) icon.className = 'fa fa-plus-square-o text-gray-500 mr-1 json-icon';
                    }
                });
            });
            
            // 添加全部展开/折叠功能
            document.getElementById('expand-all').addEventListener('click', function() {
                document.querySelectorAll('.json-content').forEach(content => {
                    content.style.display = 'block';
                });
                document.querySelectorAll('.json-icon').forEach(icon => {
                    icon.className = 'fa fa-minus-square-o text-gray-500 mr-1 json-icon';
                });
            });
            
            document.getElementById('collapse-all').addEventListener('click', function() {
                document.querySelectorAll('.json-content').forEach(content => {
                    content.style.display = 'none';
                });
                document.querySelectorAll('.json-icon').forEach(icon => {
                    icon.className = 'fa fa-plus-square-o text-gray-500 mr-1 json-icon';
                });
            });
        }

        // 页面加载完成后执行
        window.addEventListener('DOMContentLoaded', displayJson);
    </script>
</body>
</html>